<template>
       <div class="main-box-right">
        <el-dialog
        :title=" operateType"
        :visible.sync="isShow"
        >
              <common-form
              :formLabel="operateFormlabel"
              :form="operateForm"
              :inline="true"
              ref="form"
              >
               <template >
                <!-- <br> -->
                <div class="pictureupload">
                  <p style="display:inline-block;margin-left:33px;margin-right:20px;">店铺封面</p> 
                  <input type="file" v-show="false" ref="file" @change="uploadfile" accept="image/*">
                  <el-button  @click="$refs.file.click()">选择图片</el-button>     
                  <br>
                  <img   :src="val" v-for="(val,index) in File.imgSrc" :key="index" width="50px" height="50px" style="margin-left:10px;margin-top:10px;">                 
                </div>
              </template>
              </common-form>
             <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="isShow = false">取消</el-button>
                <el-button size="medium" type="primary" @click="confirm">确定</el-button>
              </div>
      </el-dialog>
         <el-button type="primary" @click="addstore" style="margin-bottom:10px">申请店铺</el-button>
         <template v-if="shopinformation.length!==0">
             <div class="main-box-right-top" v-for="val in shopinformation" :key="val.shopId">
                   <!-- <img :src="shopinformation.shopCover"  width="100px" height="100px"> -->
                    <h3 class="nickname">
                        店铺名称: {{val.shopName}}
                    </h3>
                    <p class="addr">
                        地址: {{val.shopLocation}}
                    </p>
                    <p class="phone">
                        店铺电话: {{val.shopPhone}}
                    </p>
                    <p class="phone">
                        店铺范围: {{val.shopRange}}
                    </p>
                    <el-button type="primary" class="entershop">
                      进入店铺
                    </el-button>
                </div>
         </template>
         <template v-if="shopinformation.length===0">
           <p class="nodata">
             暂无店铺
           </p>
         </template>
        </div>
</template>

<script>
import {addStore,getshopByid} from '../../../api/personalData/shop/index'
import jwtDecode from 'jwt-decode'
import cookie from '../../cookie/index'
import CommonForm from '@/components/ly/Common/CommonForm'
export default {
    name:'MainBoxRight',
    components:{CommonForm},
    data() {
      return {
        isShow:false,
        operateType:'修改信息',
        operateFormlabel:[],
        operateForm:{
        },
        shopinformation:{},
        permission:'',
        File:{
          imgSrc:'',
          files:''
        }
      }
    },
    mounted(){
      console.log(this.$store.state.userInfo);
    },
    methods:{
      confirm(){
         const formdata = new FormData();
          formdata.append("storeCover", this.File.files);
         addStore(this.operateForm,formdata).then(data=>{
           const list = data.data.message
              console.log(list);
              if(list === '成功'){
                  this.$message({
                        type: "success",
                        message: "修改成功!"
                    })
                    this.isShow = false
                    this.File.imgSrc=''
                    this.File.files=''
                    console.log(data);
                    this.getInfo();
              }
         })
      },
      uploadfile(e){
          let fs = e.target.files[0]
            this.File.files =fs
            console.log(this.File.files);
            let imgs=[]
            for(let i = 0 ;i<fs.length;i++){
                const src = window.URL.createObjectURL(fs[i])
                imgs[i]=src
            }
           this.File.imgSrc = imgs
           console.log(this.File.imgSrc);
      },
      addstore(){
        const user = jwtDecode(cookie.getToken());
        console.log(user);
        this.isShow = true
        this.operateType='申请店铺'
        this.operateFormlabel =[
           {
            model:'shopName',
            label:'商铺名称',
            type:'input',
             display:''
          },
          {
            model:'shopLocation',
            label:'商铺地址',
            type:'input',
             display:''
          },
          {
            model:'shopPhone',
            label:'联系电话',
            type:'input',
             display:''
          },
          {
            model:'shopRange',
            label:'范围',
            type:'input',
             display:''
          },
          {
            model:'shopTag',
            label:'店铺标签',
            type:'select',
            display:'',
            opts:[
              {
                label:'酒店/民宿',
                value:'酒店/民宿'
              },
               {
                label:'餐饮/美食',
                value:'餐饮/美食'
              },
               {
                label:'休闲娱乐',
                value:'休闲娱乐'
              },
               {
                label:'生活服务',
                value:'生活服务'
              },
               {
                label:'医疗健康',
                value:'医疗健康'
              },
            ]
          },

        ]
        this.operateForm={
            shopLocation:'',
            shopName:'',
            shopPhone:'',
            shopRange:'',
            shopTag:'',
            userId:user.userId
        }
      },
      getInfo(){
        console.log(cookie.getToken());
          const user = jwtDecode(cookie.getToken());
          getshopByid({userId:user.userId}).then(data=>{
            const list =data.data.data
            this.shopinfo = list
            console.log('@@',list);
        })
      }
    },
    created(){
      this.getInfo();
    },
    beforeRouteEnter (to, from, next) {
       const user = jwtDecode(cookie.getToken());
       console.log("@@@",user);
      if(user.permission !== 'SHOPPER'){
          alert('你不是商家')
      }else{
        next()
      }
      // console.log(123123);
    }
}
</script>
<style lang="less" scoped>
@navcolor: rgb(58, 58, 58);
@navfont: 13px;
@width: 1200px;
@hovercolor: #76d4ff;
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
input {
  outline: none;
}
li {
  list-style: none;
}
.el-button{
  width: 80px;
  height: 40px;
}
.nodata{
  text-align: center;
  height: 200px;
  line-height: 200px;
  border: 1px solid #e5e5e5;
}
     .main-box-right {
      margin-left: 20px;
      display: inline-block;
      width: 90%;
      padding-bottom: 20px;
      .main-box-right-top {
        margin-bottom: 20px;
        width: 100%;
        border-radius: 4px;
        border: 1px solid #e5e5e5;
        // background: #76d4ff;
        position: relative;
        img{
           position: absolute;
          top: 15px;
          left: 230px;
        }
        .nickname{
          padding: 20px;
          margin-left: 20px;
        }
        p{
          padding: 20px;
          margin-left: 20px;
        }
        .entershop{
          width: 140px;
          height: 45px;
          position: absolute;
          top: 43px;
          right: 66px;
        }
      }
    }
</style>
 